<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>新开产品充值卡</title>
<meta name="decorator" content="default" />

</head>
<body>

	<div data-role="navbar">
		<ul>
			<li><a href="${ctx}/cash/member/cards/new/cardTimesPage">新开计次护理卡</a></li>
			<li><a href="${ctx}/cash/member/cards/new/cardDurationPage">新开时段护理卡</a></li>
			<li><a href="${ctx}/cash/member/cards/new/cardProductPage"
				class="ui-btn-active">新开产品充值卡</a></li>
			<li><a href="${ctx}/cash/member/cards/new/cardAllPage">新开综合充值卡</a></li>
		</ul>
	</div>

	<div data-role="content" class="container form-input">
		<tags:message content="${message}" />
		<div class="icon-buttons">
			<input type="button" data-inline="true" data-icon="check"
				onclick="return directOpenURL('${ctx}/cash/member/detail?id=${member.customer.id}')"
				data-iconpos="notext" value=" 返回" />
		</div>
		<c:if test="${not empty member.newCards.productCards}">
			<h3 style="text-align: center">新开卡列表</h3>
			<table id="contentTableNewCardProduct" data-role="table"
				class="ui-responsive table-stroke">
				<thead>
					<tr>
						<th colspan="7" style="text-align:center;">产品充值卡</th>
					</tr>
					<tr>
						<th>卡名</th>
						<th>适用产品</th>
						<th>零售价</th>
						<th>店面优惠价</th>
						<th>产品折扣(%)</th>
						<th>服务专员</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${member.newCards.productCards}" var="cart">
						<tr id="${cart.id}">
							<td id="name">${cart.card.template.name}</td>
							<td><ul>
									<c:forEach items="${template.productList}" var="pro"
										varStatus="status">

										<c:choose>
											<c:when test="${pro.storeProduct.product_type==0}">
												<li>${pro.storeProduct.product.name}</li>
											</c:when>
											<c:when test="${pro.storeProduct.product_type==1}">
												<li>${pro.storeProduct.storeSelfProduct.name}</li>
											</c:when>
										</c:choose>
									</c:forEach>
								</ul></td>
							<td>${cart.card.template.retail_price}</td>
							<td>${cart.real_cost}</td>
							<td>${fns:changeDisCount(cart.card.productDiscount)}</td>
							<td>${cart.employee.name}</td>
							<td><a data-role="button" data-inline="true"
								data-icon="delete" data-iconpos="notext"
								onclick="deleteTarget('确定要删除：${cart.card.template.name}, 删除后基于该卡的所以数据将被清除，确定继续?','${ctx}/cash/member/cards/new/cardProductDelete?id=${member.customer.id}&cardID=${cart.id}')">删除</a>
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			<hr />
		</c:if>
		<h3 style="text-align: center">卡模板列表</h3>
		<h4>
			您选择了卡【<span id="templateName"></span>】
		</h4>
		<table id="contentTableCardProduct" data-role="table"
			class="ui-responsive table-stroke">
			<thead>
				<tr>
					<th colspan="5" style="text-align:center;">产品充值卡</th>
				</tr>
				<tr>
					<th>卡名</th>
					<th>适用产品</th>
					<th>零售价</th>
					<th>店面优惠价</th>
					<th>产品折扣(%)</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${member.newCards.templates.productCardTemplates}"
					var="template">
					<tr id="${template.id}" cardName="${template.name}">
						<td>${template.name}</td>
						<td>
							<ul>
								<c:forEach items="${template.productList}" var="pro"
									varStatus="status">
									<c:if test='${status.count<4}'>
										<c:choose>
											<c:when test="${pro.storeProduct.product_type==0}">
												<li>${pro.storeProduct.product.name}</li>
											</c:when>
											<c:when test="${pro.storeProduct.product_type==1}">
												<li>${pro.storeProduct.storeSelfProduct.name}</li>
											</c:when>
										</c:choose>
									</c:if>
									<c:if test='${status.count==4}'>. . . . . .</c:if>
								</c:forEach>
							</ul>
						</td>
						<td>${template.retail_price}</td>
						<td>${template.real_cost}</td>
						<td>${fns:changeDisCount(template.discount)}</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
	<script type="text/javascript">
		var cardID;
		var cardName;
		$(document).ready(function() {
			registerSelectListener("contentTableCardProduct");
			disableExitMenu();
		});
		function registerSelectListener(target) {

			var trs = "#" + target + " tbody tr";
			$(trs)
					.click(
							function() {
								//-----operation
								var item = $("#opreation-" + this.id);
								if (item.length > 0) {
									item.remove();
									return;
								}
								$(".opreation").remove();
								var html = '<tr id="opreation-' + this.id + '" class="opreation"><td colspan="6">';
								html += '<button onclick="openCard()" data-inline="true">开卡</button>';
								html += "</td></tr>";

								$(this).after(html);
								$("#" + target).trigger('create');

								//-------------

								$("#" + target + " tbody tr").removeClass(
										"select_active");
								$(this).addClass("select_active");

								if ('contentTableCardProduct' == target) {
									cardID = $(this).attr("id");
									cardName = $(this).attr("cardName");
									$("#templateName").text(cardName);
								}
							});

			var currentId = '${cardTimesID}';
			if (currentId == '') {
				$("#" + target + " tbody tr:first-child").click();
			} else {
				$("#" + currentId).click();
			}
		}

		function openCard() {
			if (cardID == null || cardName == null) {
				global.confirm("请先选择卡模板", function() {
				});
				return false;
			}
			var content = "您选择了产品充值卡【" + cardName + "】,确认开卡？";
			// 自定义按钮
			global
					.confirm(
							content,
							function() {
								var url = "${ctx}/cash/member/cards/new/cardProductForm?id=${member.customer.id}&cardID="
										+ cardID;
								window.location.href = url;
							});
		}

		function page(n, s) {
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
			return false;
		}
	</script>
</body>
</html>
